﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <link rel="stylesheet" href="<{$ipath}>alipay/css/layout.css">
	<link rel="stylesheet" href="<{$ipath}>alipay/css/base.css">
    <link rel="stylesheet" href="<{$ipath}>alipay/css/reply.css">
    <script type="text/javascript" src="<{$ipath}>alipay/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="<{$ipath}>alipay/js/_base.js"></script>
    <title>自动回复</title>

</head>
<body>
    <div class="keyword_reply">
        <div class="reply_tab_wrap clearfix">
            <ul class="auto_reply_tab clearfix">
                <li><a href="?g=alipay&amp;m=autoreply&amp;a=index">消息自动回复</a></li>
                <li class="actived"><a href="?g=alipay&amp;m=keyreply&amp;a=index">关键词自动回复</a></li>
            </ul>
        </div>
        <div class="new-rule">
            <span class="create-new">创建新规则</span><a href="<{$basehost}>api/help_detail.php" target="_blank" class="auto rule-help" seed="newRule-auto" smartracker="on">如何设置关键词自动回复？</a>
        </div>
        <div class="editwrap new-rule-editwrap">

        </div>

        <{foreach $keyreply as $k => $v}>
            <div class="rule-list-item editwrap" style="display: block;" rulename="<{$v.rulename}>" rulekeyword="<{$v.keywords}>" edittype="<{$v.type}>" rulecontent="<{$v.content}>" ruleid="<{$v.id}>">
                <table class="oricon">
                    <tbody>
                        <tr>
                            <td>规则名：</td>
                            <td class="rule-name"><{$v.rulename}></td>
                        </tr>
                        <tr>
                            <td>关键词：</td>
                            <td>
                                <ul class="keyword-list">
                                    <{foreach $v.keys as $kk => $vv}>
                                        <{if $vv}>
                                            <li data-state="0"><{$vv}></li>
                                        <{/if}>
                                    <{/foreach}>
                                </ul>
                                <div class="keyword-tip" style="top: 25px; left: 59px; display: none;">点击设置精准匹配</div>
                            </td>
                        </tr>
                        <tr>
                            <td>回复内容：</td>
                            <{if $v.type eq 1}>
                                <td class="rule-content rule-img">
                                    <span class="rule-content-tag">图文</span>
                                    <span class="rule-content-title"><{$v.title}></span>
                                    <div class="fn-hide">
                                        <div class="message-list fl" msgid="">
                                            <div class="message-item">
                                                <div class="message-body">
                                                    <{foreach $v.msgtext as $kk => $vv}>
                                                    <{if $kk eq 0}>
                                                    <a href="" class="item-url">
                                                        <div class="message-title first-message-title"><div class="title-wrapper"><h4 class="popTit"><{$vv.title}></h4><div class="title-bg"></div></div></div>
                                                        <{if $v.msgnum eq 1}>
                                                        <div class="message-info"><{$vv.time}></div>
                                                        <{/if}>
                                                        <div class="message-cover-pic">
                                                            <img src="<{$vv.img_url}>" class="cover" >
                                                        </div>
                                                        <{if $v.msgnum eq 1}>
                                                        <div class="message-text word-bread"><{$vv.abstract}></div>
                                                        <span class="view">立即查看</span>
                                                        <{/if}>
                                                    </a>
                                                    <{else}>
                                                    <a href="" class="item-url">
                                                        <ul class="show-cont ui-sortable">
                                                            <li  class="show-item fn-clear">
                                                                <div class="cover-pic J_change_image" data-image="image" data-default="缩略图">
                                                                    <img src="<{$vv.img_url}>" class="slImg">
                                                                </div>
                                                                <h1 class="show-title title-break J_change_title" data-title="title" data-default="标题">
                                                                    <{$vv.title}>
                                                                </h1>
                                                            </li>
                                                        </ul>
                                                    </a>
                                                    <{/if}>
                                                    <{/foreach}>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </td>
                            <{else}>
                                <td class="rule-content"><{$v.content}></td>
                            <{/if}>
                        </tr>
                    </tbody>
                </table>
                <p class="rule-option oricon">
                    <span class="rule-edit">编辑</span>
                    <span class="rule-del">删除</span>
                </p>
            </div>
        <{/foreach}>
        <div class="lists">
            <{$pagestr}>
				<!--<ul class="pagination pull-left" style="margin-right: 15px;">
                    <li><a>共24页</a></li>
                    <li><a>每页3条</a></li>
                </ul>		
                <ul class="pagination pull-left">
                    <li><a class="pointer">首页</a></li>                    
                    <li class="active"><a  class="ng-binding">1 <span class="sr-only"></span></a></li>
                    <li><a>2 <span class="sr-only"></span></a></li>
                    <li><a>3 <span class="sr-only"></span></a></li>
                    <li><a>4 <span class="sr-only"></span></a></li>                    
                    <li><a class="pointer"  title="尾页">尾页</a></li>
                </ul>-->
			</div>

        <div class="rule-editor" style="display: none;">
            <ul>
                <li>
                    <label for="rule-name">规则名称</label>
                    <div class="rule-name-hack">
                        <input type="text"  class="rule-name" maxlength="30"  placeholder="最多30个字">
                        <div class="form-validate-tip fn-clear form-validate-keyword">
                            <div class="form-explain fn-left">请填写规则名最多30个字。</div>
                        </div>
                        <div class="form-validate-tip1 fn-clear ">
                            <div class="form-left-words fn-right fn-hide">还可输入<span class="form-left-words-number">30</span>个字</div>
                        </div>
                    </div>
                </li>
                <li>
                    <label for="rule-keyword">关键词</label>
                    <div class="keyword-container">

                            <input type="text"  maxlength="30" placeholder="最多10个关键词，用空格分隔" class="rule-keyword" >
                            <div class="form-validate-tip fn-clear form-validate-keyword">
                                <div class="form-explain fn-left">请填写正确的关键词，1～30个字，不得多于10个。</div>
                            </div>
                     </div>
                </li>
                <li>
                    <label for="rule-keyword">回复内容</label>
                    <div class="message-edit-cont">
                        <div class="message-edit-type fn-clear">
                            <a class="message-edit message-edit-text fn-left active">文字</a>
                            <div class="message-edit-message fn-left">
                                <a class="message-edit message-edit-hybrid fn-left">图文广播</a>
                                <ul class="message-hibrid-menu" style="display: none;">
                                    <li><a class="message-page-store">从素材库中选取</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="message-edit-area fn-clear clearfix">
                            <textarea name="content" maxlength="600" class="message-text-area fn-left"></textarea>
                            <div class="message-edit-stat fn-left">
                                <span class="message-rest-num fn-right">还可以输入<span class="restNum">600</span>字</span>
                            </div>
                        </div>

                        <div class="message-contain clearfix">

                        </div>

                        <div class="form-validate-tip fn-clear">
                            <div class="form-explain send-message-empty fn-left">请填写/选取内容</div>
                        </div>
                    </div>
                </li>
                <li class="keyword-submit">
                    <input type="hidden" value="0" id="edittype" />
                    <input type="hidden" value="0" id="msgid" />
                    <a  class="btn btn-orange auto-reply-save" >保<i class="btn-spacing"></i>存</a>
                    <a  class="btn btn-gray auto-reply-delete" >取<i class="btn-spacing"></i>消</a>
                </li>
            </ul>
        </div>

        </div>
        <!-- popup -->
        <div class="ui-mask"></div>
        <div class="alipay-xbox" style="top: 210.5px; left: 124px; opacity: 1; z-index: 999;display:none;">
            <a class="close" title="关闭本框"  onclick="closediv('.alipay-xbox', '.ui-mask');" >×</a>
            <div class="alipay-xbox-content">
                <div class="message-box">
                    <div class="title"><h3>选择图文广播</h3></div>
                    <div class="top-tools fn-clear">
                        <div class="fl">
                            <a href="?g=alipay&amp;m=fodder&amp;a=single" class="edit-single-message">新建单图文广播</a>
                            <a href="?g=alipay&amp;m=fodder&amp;a=multi" class="edit-multi-message">新建多图文广播</a>
                        </div>
                    </div>
                    <div class="message-placeholder fn-clear">

                        <{foreach $fodder as $k => $v}>
                        <div class="message-list fl" msgid="<{$k}>">
                            <div class="message-item">
                                <div class="message-body">
                                    <{foreach $v as $kk => $vv}>
                                    <{if $kk eq 0}>
                                    <a href="" class="item-url">
                                        <div class="message-title first-message-title"><div class="title-wrapper"><h4 class="popTit"><{$vv.title}></h4><div class="title-bg"></div></div></div>
                                        <{if $vv.type eq 1}>
                                        <div class="message-info"><{$vv.time}></div>
                                        <{/if}>
                                        <div class="message-cover-pic">
                                            <img src="<{$vv.img_url}>" class="cover" >
                                        </div>
                                        <{if $vv.type eq 1}>
                                        <div class="message-text word-bread"><{$vv.abstract}></div>
                                        <span class="view">立即查看</span>
                                        <{/if}>
                                    </a>
                                    <{else}>
                                    <a href="" class="item-url">
                                        <ul class="show-cont ui-sortable">
                                            <li  class="show-item fn-clear">
                                                <div class="cover-pic J_change_image" data-image="image" data-default="缩略图">
                                                    <img src="<{$vv.img_url}>" class="slImg">
                                                </div>
                                                <h1 class="show-title title-break J_change_title" data-title="title" data-default="标题">
                                                    <{$vv.title}>
                                                </h1>
                                            </li>
                                        </ul>
                                    </a>
                                    <{/if}>
                                    <{/foreach}>
                                </div>
                                <div class="message-filter"></div>
                                <div class="chosen"></div>
                            </div>
                        </div>
                        <{/foreach}>
                    </div>
                    <div class="actions">
                        <a class="submit"><span class="btn btn-orange">确&nbsp;&nbsp;定</span></a>
                        <a class="cancel"><span class="btn btn-gray" onclick="closediv('.alipay-xbox','.ui-mask');">取&nbsp;&nbsp;消</span></a>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                //规则名字数
                $(".rule-editor .rule-name").focus(function(){
                    $(".rule-editor .form-left-words").show();
                });
                $(".rule-editor .rule-name").blur(function(){
                    $(".rule-editor .form-left-words").hide();
                });
                $(".rule-editor .rule-name").keyup(function(){
                    var num=30-$(this).val().length;
                    $(".rule-editor .form-left-words .form-left-words-number").text(num);                    
                });
                //文字输入字数显示
                $(".message-edit-cont .message-edit-area .message-text-area").keyup(function () {
                    var len = $(this).val().length;
                    if (len > 0) {
                        $('.message-edit-cont .form-validate-tip').hide();
                    }
                    var restNum = $(".message-edit-cont .message-edit-area .message-text-area").attr("maxlength") - len;
                    $('.message-edit-cont .message-edit-stat .restNum').text(restNum);
                    
                });
                //文字类型切换
                $(".message-edit-type .message-edit-text").click(function () {
                    $("#edittype").val("0");
                    $("#msgid").val("0");
                    if (!$(".message-edit-cont .message-edit-type .message-edit-text").hasClass("active")) {
                        $(".message-edit-cont .message-edit-area .message-text-area").val("");
                        $('.message-edit-cont .message-edit-stat .restNum').text($(".message-edit-cont .message-edit-area .message-text-area").attr("maxlength"));
                    }
                    $(".message-edit-cont .message-edit-type .message-edit-hybrid").removeClass("active");
                    $(".message-edit-cont .message-edit-type .message-edit-text").addClass("active");
                    $(".message-edit-cont .message-contain").empty();
                    $(".message-edit-cont .message-edit-area").show();
                    $(".message-edit-cont .message-contain").hide();

                });
                //图文广告播下拉
                $(".message-edit-message").hover(function () {
                    $(this).find(".message-hibrid-menu").show();
                }, function () {
                    $(this).find(".message-hibrid-menu").hide();
                });

                //素材框
                $(".message-page-store").click(function () {
                    showdiv('.alipay-xbox');
                    $(".alipay-xbox .active").removeClass("active");
                });
                $(".alipay-xbox .message-list").click(function () {
                    $(this).addClass("active");
                    $(this).siblings(".message-list").removeClass("active");
                    $(".alipay-xbox").attr("msgid", $(this).attr("msgid"));
                });
                //确定选取
                $(".alipay-xbox .actions .submit").click(function () {
                    $("#edittype").val("1");
                    $(".message-edit-cont .message-edit-type .message-edit-hybrid").addClass("active");
                    $(".message-edit-cont .message-edit-type .message-edit-text").removeClass("active");
                    closediv('.alipay-xbox', '.ui-mask');
                    var messageContain = $(".message-edit-cont .message-contain");
                    messageContain.show();
                    messageContain.empty();
                    var messageEditArea = $(".message-edit-cont .message-edit-area");
                    messageEditArea.hide();
                    var selectedMessage = $(".message-list.active").clone();
                    selectedMessage.removeClass("active");
                    selectedMessage.find(".message-filter").remove();
                    selectedMessage.find(".chosen").remove();
                    messageContain.append(selectedMessage);
                    $(".message-edit-cont .message-edit-area .message-text-area").val("");
                    $("#msgid").val($(".alipay-xbox").attr("msgid"));
                });

                //创建规则
                $(".create-new").click(function () {
                    $(".keyword-submit .auto-reply-delete").click();
                    $(".rule-editor").show();
                    $(".rule-editor").attr("isnew", "true");
                    $(".new-rule-editwrap").append($(".rule-editor"));
                });
                //保存
                $(".keyword-submit .auto-reply-save").click(function () {
                    var editwrap = $(this).parents(".editwrap");
                    var ruleEditor = $(".rule-editor");
                    var ruleNameWrap = ruleEditor.find(".rule-name");
                    var ruleName = $.trim(ruleNameWrap.val());
                    var ruleKeywordWrap = ruleEditor.find(".rule-keyword");
                    var ruleKeyword = $.trim(ruleKeywordWrap.val());
                    var content = "";
                    var iserror=false;
                    if (ruleName == "") {
                        ruleNameWrap.next(".form-validate-tip").show();
                        iserror=true;
                    }else{
                        ruleNameWrap.next(".form-validate-tip").hide();
                    }
                    var keyswords = ruleKeyword.split(/\s+/);
                    if (ruleKeyword == "" || keyswords.length>10) {
                        ruleKeywordWrap.next(".form-validate-tip").show();
                        iserror=true;
                    }else{
                        ruleKeywordWrap.next(".form-validate-tip").hide();
                    }
                    
                    
                    
                    var textArea = $(".message-edit-cont .message-edit-area .message-text-area");
                    var ruleContent = textArea.val();
                    var edittype = $("#edittype").val();
                    if (edittype == "0" && $.trim(ruleContent) == "") {
                        $('.message-edit-cont .form-validate-tip').show();
                        iserror=true;
                    } else if (edittype == "1" && ($.trim($("#msgid").val()) == "0" || $.trim($("#msgid").val()) == "")) {
                        $('.message-edit-cont .form-validate-tip').show();
                        iserror=true;
                    }else{
                        $('.message-edit-cont .form-validate-tip').hide();
                    }
                    if(iserror){
                        return;
                    }
                    if(edittype=="0"){
                        content = ruleContent;
                    }
                    else {
                        content = $("#msgid").val();
                    }

                    if (ruleEditor.attr("isnew") == "true") {
                        
                        var url = "?g=alipay&m=keyreply&a=add";
                        $.post(url, {rulename: ruleName, keywords: ruleKeyword, content: content, type: edittype}, function(data){
							//ajax成功后
							window.location.reload();
                        }, 'json');
                        
                    } else {
						var ruleid=ruleEditor.attr("ruleid");
                        //ajax成功后
                        editwrap.find(".rule-name").text(ruleName);
                        var keywordList = editwrap.find(".keyword-list");
                        keywordList.empty();
                       
                        for (var i = 0; i < keyswords.length; i++) {
                            if($.trim(keyswords[i])!="") {
                                keywordList.append('<li data-state="0">' + keyswords[i] + '</li>');
                            }
                        }
                        var ruleContentWrap = editwrap.find(".rule-content");
                        if (edittype == "0") {
                            ruleContentWrap.empty();
                            ruleContentWrap.text(ruleContent);
                            editwrap.attr("rulecontent", ruleContent);
                        } else if (edittype == "1") {
                            var firstTitle = $(".message-edit-cont .message-contain .message-title h4").text();                            
                            ruleContentWrap.empty();
                            ruleContentWrap.append('<span class="rule-content-tag">图文</span><span class="rule-content-title">' + firstTitle + '</span>');
                            editwrap.attr("rulecontent", $("#msgid").val());
                            var hdiv=$("<div class='fn-hide'></div>");
                            hdiv.append($(".message-edit-cont .message-contain .message-list"));
                            ruleContentWrap.append(hdiv);
                        }

                        var url = "?g=alipay&m=keyreply&a=edit";
						$.post(url, {rulename: ruleName, keywords: ruleKeyword, content: content, type: edittype, ruleid: ruleid}, function(data){
							//ajax成功后							
                        }, 'json');

                        editwrap.find(".oricon").show();
                        editwrap.attr("rulename", ruleName);
                        editwrap.attr("rulekeyword", ruleKeyword);
                        editwrap.attr("edittype", edittype);
                        $(".rule-editor .form-left-words .form-left-words-number").text(30);
                    }
                    ruleEditor.hide();
                    initTypeSelect();
                });
                //取消
                $(".keyword-submit .auto-reply-delete").click(function () {
                    var editwrap = $(this).parents(".editwrap");
                    var ruleEditor = editwrap.find(".rule-editor");
                    ruleEditor.find(".rule-name").val("");
                    ruleEditor.find(".rule-keyword").val("");                    
                    ruleEditor.hide();
                    initTypeSelect();
                    editwrap.find(".oricon").show();
                    $(".rule-editor .form-left-words .form-left-words-number").text(30);

                });
                //编辑
                $(".rule-list-item .rule-option .rule-edit").click(function () {
                    $(".keyword-submit .auto-reply-delete").click();
                    var editwrap = $(this).parents(".editwrap");
                    
                    var ruleEditor = $(".rule-editor");
                    ruleEditor.attr("isnew", "false")
                    //初始化值
                    ruleEditor.find(".rule-name").val(editwrap.attr("rulename"));
                    $(".rule-editor .form-left-words .form-left-words-number").text(30-editwrap.attr("rulename").length);
                    ruleEditor.find(".rule-keyword").val(editwrap.attr("rulekeyword"));
					ruleEditor.attr("ruleid",editwrap.attr("ruleid"));
                    var edittype = editwrap.attr("edittype");
                    if (edittype == "0") {
                        ruleEditor.find("#edittype").val("0");
                        ruleEditor.find("#msgid").val("0");
                        ruleEditor.find(".message-text-area").val(editwrap.attr("ruleContent"));
                    } else if (edittype == "1") {
                        ruleEditor.find("#edittype").val("1");
                        ruleEditor.find("#msgid").val(editwrap.attr("rulecontent"));
                        
                        
                        var messageEditCont=ruleEditor.find(".message-edit-cont");
                        messageEditCont.find(".message-edit-text").removeClass("active");
                        messageEditCont.find(".message-edit-hybrid").addClass("active");
                        messageEditCont.find(".message-edit-area").hide();
                        messageEditCont.find(".message-contain").show();
                        var messgeItem=editwrap.find(".message-list").clone();
                        messageEditCont.find(".message-contain").append(messgeItem);
                        
                    }
                    editwrap.append(ruleEditor)
                    ruleEditor.show();
                    editwrap.find(".oricon").hide();
                    
                });
                //删除规则
                $(".rule-list-item .rule-option .rule-del").click(function () {
                    var editwrap=$(this).parents(".editwrap");
                    var ruleid=editwrap.attr("ruleid");
                    var url = "?g=alipay&m=keyreply&a=del";
                    $.post(url, {ruleid: ruleid}, function(data){
                        //ajax成功后
                        window.location.reload();
                    }, 'json');
                });
                //初始化类型选择
                function initTypeSelect() {
                    $(".message-edit-cont .message-edit-area .message-text-area").val("");
                    $('.message-edit-cont .message-edit-stat .restNum').text($(".message-edit-cont .message-edit-area .message-text-area").attr("maxlength"));
                    $(".message-edit-cont .message-edit-type .message-edit-hybrid").removeClass("active");
                    $(".message-edit-cont .message-edit-type .message-edit-text").addClass("active");
                    $(".message-edit-cont .message-contain").empty();
                    $(".message-edit-cont .message-edit-area").show();
                    $(".message-edit-cont .message-contain").hide();
                    $("#edittype").val("0");
                    $("#msgid").val("0");
                }
            });
        </script>


</body>
</html>